<%@ page language="java" import="java.util.*" pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
  <base href="/">
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no, shrink-to-fit=no">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <meta name="apple-mobile-web-app-capable" content="no">
  <meta name="format-detection" content="telephone=no">
  <title>账号登录</title>
  <script src="static/js/cssrem.js"></script>
<link href="static/css/style.css" rel="stylesheet"></head>
<body class="bgwh">
  <div class="content mark-content-top">
    <div class="wrapper"><a class="btn-home dib" href="${h5Domain}/index"></a>
      <div class="icon-login auto"></div>
      <div class="tab-login">
        <div class="cell tab-login-head">
          <div class="tab-login-item cell-bd active"><a class="dib" href="javascript:;">账号登录</a></div>
          <div class="tab-login-item cell-bd"><a class="dib" href="javascript:;">手机快捷登录</a></div>
        </div>
        <div class="tab-login-body active">
          <dl class="mt20">
            <dd class="mt20"><input class="ui-login-input f30" type="tel" placeholder="请输入手机号" name="phone" maxlength="11" data-verified="^1[3-9]\d{9}$" data-tips="手机号不能为空！|请输入正确的手机号！"></dd>
            <dd class="mt20"><input class="ui-login-input f30" type="password" placeholder="请输入密码" name="password" maxlength="18" data-verified="^[\d\w]{6,18}$" data-tips="密码不能为空！|请输入6-18位由数字或字母组成的密码！"></dd>
            <dd class="mt20 pt20"><a id="loginToPwd" class="ui-login-btn ui-login-btn--primary ui-login-btn--medium db f32 mt10 ui-login-btn--disabled js-btn-submit" href="javascript:;">登录</a></dd>
            <dd class="mt20 tc f24 g9 cell">
              <div class="cell-bd tl"><a class="g9" href="${h5Domain}/findPwd?forward=${forward}">忘记密码？</a></div>
              <div class="cell-fd pr0"><a class="g-primary" href="wap/login/toRegister?forward=${forward}">去注册</a></div>
            </dd>
          </dl>
        </div>
        <div class="tab-login-body dn quick">
          <dl class="mt20">
            <dd class="mt20"><input id="phone" class="ui-login-input f30 phone-code" type="tel" placeholder="请输入手机号" name="phone" maxlength="11" data-verified="^1[3-9]\d{9}$" data-tips="手机号不能为空！|请输入正确的手机号！"></dd>
            <dd class="mt20 cell ui-password">
              <input class="cell-bd ui-login-input f30" type="tel" placeholder="请输入验证码" maxlength="6" data-verified="^\d{6}$" data-tips="请输入验证码！|请输入6位数字的验证码！">
              <!-- <a id="sendsms" class="cell-fd verified tc f28 g6" href="javascript:;">发送验证码</a> -->
              <div class="ui-cell__fd">
                <a id="sendsms" class="f28 g6 tc white verified disabled" href="javascript:;">发送验证码</a>
              </div>
            </dd>
            <dd class="mt20 pt20"><a id="loginToCode" class="ui-login-btn ui-login-btn--primary ui-login-btn--medium db f32 mt10 ui-login-btn--disabled js-btn-submit" href="javascript:;">登录</a></dd>
            <dd class="mt20 tc f24 g9">还没账号？<a id="toRegister" class="g-primary" href="wap/login/toRegister?forward=${forward}">去注册</a></dd>
          </dl>
        </div>
      </div>
    </div>
  </div>
  <input class="forward" type="hidden" value="${forward}">
<script src="//cdn.bootcss.com/babel-polyfill/6.23.0/polyfill.min.js"></script>
<script src="static/js/layer_mobile/layer.js"></script>
<script type="text/javascript" src="static/js/app.js"></script>
<script src="https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js"></script>
<script src="https://cdn.bootcss.com/axios/0.16.2/axios.min.js"></script>
<script src="//res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>	
<script src="static/js/wx-share.js"></script>
<script>
    /* document.addEventListener('DOMContentLoaded',function(){
      var loginToPwd = document.querySelector('#loginToPwd');
      var loginToCode = document.querySelector('#loginToCode');   
      loginToPwd.addEventListener('click',function(){
    	  var parent  = document.querySelector('.tab-login-body')
    	  var inputs = parent.querySelectorAll('input')
    	  var phone = inputs[0].value
    	  var password = inputs[1].value
    	  var formData = new FormData()
          formData.append('phone',phone)
          formData.append('pwd',md5(password))
          if(!verified(0,inputs)) return false;
          
    	  submit('wap/login/loginToPwd',formData)
      })
      
      loginToCode.addEventListener('click',function(){
    	  var parent  = document.querySelector('.tab-login-body.quick')
    	  var inputs = parent.querySelectorAll('input')
    	  var phone = inputs[0].value
    	  var smsCode = inputs[1].value 
    	  
    	  var formData = new FormData()
          formData.append('phone',phone)
          formData.append('smsCode',smsCode)
          formData.append('type','login')
          if(!verified(1,inputs)) return false;
    	  submit('wap/login/loginToCode',formData)

      })
    }); */
    
    
    var wxShare  = new WxShare({
  	  title: '登录万果田园', 
  	  des: '登录万果田园，开启您的认养之旅！', 
  	  linkUrl: location.href, 
  	  imgUrl: 'http://fruit-picture.oss-cn-beijing.aliyuncs.com/fruit/share/shareimg.png'
    })
    
    
    document.addEventListener('DOMContentLoaded', function () {
        tab();
        var eInputs = document.querySelectorAll('[data-verified]')
        var isSubmitDisabled = false
        for (var i = 0; i < eInputs.length; i++) {
          var element = eInputs[i];
          // 输入验证
          element.addEventListener('input', function () {
            var value = this.value.trim()
            if (this.name === 'phone') {
              this.value = value.replace(/\D+/, '')
              if(this.classList.contains('phone-code')){
            	 verifiedActive(value)
              }
            } else {
              this.value = value.match(/[\w\d]+/g)
            }
            submitActive()
          });
          // 离开验证
          element.addEventListener('blur', function () {
            var is = verified(this, {
              regexp: this.dataset.verified,
              tips: this.dataset.tips
            })
          })
        };
        // 点击
        var btnSubmit = document.querySelector('.tab-login-body.active .js-btn-submit')
        var loginToPwd = document.querySelector('#loginToPwd');
        var loginToCode = document.querySelector('#loginToCode');  
        
        loginToPwd.addEventListener('click',onclick);
        loginToCode.addEventListener('click',onclick);
      })
      var isubmitStatus = true;
      function onclick(){
    	var isDisabled = this.classList.contains('ui-login-btn--disabled')
        if (isDisabled) return false
        //isubmitStatus = false
        if(this.id =='loginToPwd'){
      	  var parent = document.querySelector('.tab-login-body')
      	  var inputs = parent.querySelectorAll('input')
        	  var phone = inputs[0].value
        	  var password = inputs[1].value
        	  var formData = new FormData()
             formData.append('phone',phone)
             formData.append('pwd',md5(password))
             submit('wap/login/loginToPwd',formData)
      	  
      	  
        }else if(this.id =='loginToCode'){
      	  var parent  = document.querySelector('.tab-login-body.quick')
      	  var inputs = parent.querySelectorAll('input')
      	  var phone = inputs[0].value
      	  var smsCode = inputs[1].value 
      	  var formData = new FormData()
            formData.append('phone',phone)
            formData.append('smsCode',smsCode)
            formData.append('type','login')
      	  submit('wap/login/loginToCode',formData)
        }
    }
      
      
    
    
    function submit(url,params){
    	axios({
            method: 'post',
            url: url,
            data:params,
            headers: { 'X-Requested-With': 'XMLHttpRequest' }
        }).then(function (res) {
        	var state = res.data.result.state
        	var message = res.data.result.message
        	if(state!=1){
        		return layer.open({ content: message,skin:'msg',time: 2 })
        	}
       		var d = document.querySelector(".forward").value.trim()
       		if(d != ''){location.href=d}
        }).catch(function(err){
        	console.log(err)
        	layer.open({ content: '请求失败！',skin:'msg',time: 2 }) 
        })
    }
    
  //点亮发送验证码按钮
    function verifiedActive(value) {
      var eVerified = document.querySelector('.verified')
      if (/^1[3-9]\d{9}$/.test(value) && !eVerified.classList.contains('active')) {
        eVerified.classList.remove('disabled')
      } else {
        eVerified.classList.add('disabled')
      }
    }
    
    //
    function submitActive() {
      var eInputs = document.querySelectorAll('.tab-login-body.active [data-verified]')
      var btnSubmit = document.querySelector('.tab-login-body.active .js-btn-submit')
      for (var i = 0; i < eInputs.length; i++) {
        var element = eInputs[i];
        var value = element.value.trim()
        var regexp = new RegExp(element.dataset.verified, 'g')
        var d = regexp.test(value)
        if (!d) {
          isSubmitDisabled = false
          btnSubmit.classList.add('ui-login-btn--disabled')
          break;
        } else {
          isSubmitDisabled = true
          btnSubmit.classList.remove('ui-login-btn--disabled')
        }
      }
    }
    
    function verified(eInput, obj) {
        var value = eInput.value.trim()
        var regexp = new RegExp(obj.regexp, 'g')
        var d = regexp.test(value)
        var tips = obj.tips.indexOf('|') > -1 ? obj.tips.split('|') : obj.tips
        if (value === '') {
          return layer.open({
            content: tips[0],
            skin: 'msg',
            time: 2
          }), false
        } else if (!d) {
          return layer.open({
            content: tips[1],
            skin: 'msg',
            time: 2
          }), false
        } else {
          return true
        }
      }
    
    /* function verified(index,inputs){
    	var tips = '',status = false
    	
    	if(index === 0){
    		var phoneValue = inputs[0].value.trim()
        	var pwd = inputs[1].value.trim()
	    	if(phoneValue==''){
	    		tips = '手机号不能为空！'
	    	}else if(!/^1[356789]\d{9}$/.test(phoneValue)){
	    		tips = '请输入正确的手机号！'
	    	}else if(pwd==''){
	    		tips = '密码不能为空！'
	    	}else if(!/^[\d\w]{6,18}$/.test(pwd)){
	    		tips = '请输入6-18位字母数字组合的密码'
	    	}else{
	    		status = true
	    	}
    	}else{
    		var phoneValue = inputs[0].value.trim()
        	var code = inputs[1].value.trim()
    		if(phoneValue==''){
	    		tips = '手机号不能为空！'
	    	}else if(!/^1[356789]\d{9}$/.test(phoneValue)){
	    		tips = '请输入正确的手机号！'
	    	}else if(code==''){
	    		tips = '验证码不能为空！'
	    	}else if(!/^[\d]{6}$/.test(code)){
	    		tips = '请输入六位数字的验证码'
	    	}else{
	    		status = true
	    	}
    	}
    	
    	if(!status){
    		layer.open({
                content: tips,
                skin: 'msg',
                time: 2
              })
    	}
    	return status
    	
    } */
    
    function verifiedPhone(callback) {
        var eInput = document.querySelector('.tab-login-body.active input[name=phone]')
        var is = /^1[3-9]\d{9}$/.test(eInput.value)
        callback && typeof callback === 'function' && callback(is);
      }
 // 发验证码
    (function verifiedCode(){
      var btn = document.querySelector('.verified')
      var seconds,time

      btn.addEventListener('click',function(){
        
        if(this.classList.contains('disabled')) return false;
        this.classList.add('disabled')
        this.classList.add('active')
        var formData = new FormData()
        formData.append('phone',phone.value)
        formData.append('type','login')
        axios({
            method: 'post',
            url: 'wap/sms/send',
            data:formData,
            headers: { 'X-Requested-With': 'XMLHttpRequest' }
        }).then(function (res) {
        	var state = res.data.result.state
        	var message = res.data.result.message
        	layer.open({ content: message,skin:'msg',time: 2 })
        	
        	if(state==1){
        		countdown()
        	}
        })

      });
      
      init()
      function init(){
        seconds = 60
        clearTimeout(time)
        btn.textContent = '发送验证码'
      }

      function countdown(){
        if(seconds<=0) return verifiedPhone(function (is) {
            btn.classList.remove('active')
            if (is) {
              btn.classList.remove('disabled')
            }
          }),init();
        seconds-=1
        btn.textContent =seconds+'s后重新获取'
        time = setTimeout(countdown,1000)
      }


    }());
 
  //选项卡
    function tab() {
      var btns = document.querySelectorAll('.tab-login-item')
      var items = document.querySelectorAll('.tab-login-body');
      [].forEach.call(btns, function(element, index){
        element.addEventListener('click', function () {
          [].forEach.call(btns, function (element, index) {
            element.classList.remove('active')
            items[index].classList.remove('active')
            items[index].classList.add('dn')
          })
          items[index].classList.remove('dn')
          items[index].classList.add('active')
          this.classList.add('active')
        })
      })
    }
    
    
</script>
	<script>
var _hmt = _hmt || [];
(function() {
  var hm = document.createElement("script");
  hm.src = "https://hm.baidu.com/hm.js?24fb3d27099c50ae04b59301e492b50c";
  var s = document.getElementsByTagName("script")[0]; 
  s.parentNode.insertBefore(hm, s);
})();
</script>
</body>
</html>
